<template>
<div style="padding:5px 0px">
    <div v-if="editable" style="padding-top:5px;padding-bottom: 3px;">
    <el-button @click="()=>showAddDepartmentFormModal(0,'')" size="mini">添加根级部门</el-button></div>
    </div>
    <div style="border: solid #eee 1px" :style="{height: treeSize.height}">
    <ul id="departmentTree" class="ztree"></ul>
</div>
<el-dragable-dialog ref="departmentModalRef" title="112-属性编辑" v-model="departmentFormModal.visible" class="form-modal" :width="500"  >
    <DepartmentForm :id="departmentFormModal.id" :parentId="departmentFormModal.refId" :parentName="departmentFormModal.refName" ref="departmentForm" v-if="departmentFormModal.visible"/><!-- 增加v-if，每次弹窗会更新值 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="departmentFormModal.confirmLoading" @click="departmentFormModalHandleOk" size="medium">保存</el-button>
      </span>
    </template>
</el-dragable-dialog>
</template>

<script lang="ts" setup>
/*
 * @author: wanghua
 * @date: 2021-10-06 14:18:29
 * @template: dayu-code-builder
*/

import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus';
import { FormModal, IForm } from '@/common/FormModal'
import { myutil } from '@/common/dayu-common'
import '@ztree/ztree_v3/js/jquery.ztree.all.js'
import {departmentService} from '@/api/demo/DepartmentService';
import DepartmentForm from './DepartmentForm.vue'

const props = defineProps({
  height: Number,
  editable:{type:Boolean, default: false},
  dragable:{type:Boolean, default: false}
})

const treeSize = computed(()=>{
  let treeHeight = props.height as number;
  if(props.editable) treeHeight -= 50;//减去 添加 按钮的高度
  return{
    height: treeHeight +'px'
  }
});
const departmentForm = ref();
const departmentFormModal = reactive(new FormModal());//表单弹窗

//树形结构
const selectedNode = reactive({ nodeId: '', nodeName:'' });
let departmentZTree : any;
const currDepartment = reactive({id:<number>NaN, name:''});
let parentTreeNode:any = undefined;
function initDepartmentTree() {
  var ztreeSetting = {
    data: {
      simpleData: {
        enable: true
      },
      keep: {
        parent: true //节点属性锁，是否始终保持 isParent = true
      }
    },
    async: {
      enable: true, //异步获取节点数据
      url: "api/base/department/getChildNodes",  //获取节点数据的url
      autoParam: ["id=pId"]
    },
    edit: {
      enable: props.editable, //节点可以编辑（需要引入 ztree.all.js，含 edit.js）
      showRemoveBtn: true,
      showRenameBtn: true,
      removeTitle: "删除",
      renameTitle: "编辑",
      drag:{}
    },
    view: {
      selectedMulti: false, //节点不可多选

      addHoverDom(treeId: any, treeNode: any){//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮，请务必与 setting.view.removeHoverDom 同时使用
        if ($("#btn_add_child_func_"+treeNode.id).length>0) return;
        const IDMark = "_edit";
        let aObj = $("#" + treeNode.tId + IDMark);
        if ( $("#diyBtn_" + treeNode.id).length > 0 ) return;

        let htmlStr = `<span id='diyBtn_space_${treeNode.id}' style='padding-left:10px'></span>`+
        `<span class='ztree-my-icon ztree-add-child'    id='btn_add_child_func_${treeNode.id}' title='添加下级节点'>`+
        `</span><span class='ztree-my-icon ztree-add-sibling'  id='btn_add_sibling_func_${treeNode.id}' title='添加同级节点'></span>`;
        aObj.before(htmlStr);
        let btnChild = $("#btn_add_child_func_" + treeNode.id);
        let btnSibling = $("#btn_add_sibling_func_" + treeNode.id);
        if (btnChild) { //添加下级
          btnChild.on("click", function(){
            parentTreeNode = treeNode;
            let node = myutil.parseTreeNodeId(treeNode.id);
            showAddDepartmentFormModal(node.id, treeNode.name);
          });
        }
        if (btnSibling) {//添加同级
          btnSibling.on("click", function(){
            let parentNode = treeNode.getParentNode();
            parentTreeNode = parentNode;
            if(parentNode){
              let node = myutil.parseTreeNodeId(parentNode.id);
              showAddDepartmentFormModal(node.id, parentNode.name);
            }else{
              showAddDepartmentFormModal(-1, '');
            }
          });
        }
      },
      removeHoverDom(treeId: any, treeNode: any){//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮，请务必与 addHoverDom 同时使用
        $("#btn_add_child_func_"+treeNode.id).off().remove();
        $("#btn_add_sibling_func_"+treeNode.id).off().remove();
        $("#diyBtn_space_"+treeNode.id).off().remove();
      },
      addDiyDom(treeId: any, treeNode: any){//用于在节点上固定显示用户自定义控件。大数据量的节点加载请注意：在 addDiyDom 中针对每个节点 查找 DOM 对象并且添加新 DOM 控件，肯定会影响初始化性能；如果不是必须使用，建议不使用此功能


      }
    },
    callback: {
      onClick: function (event: any, treeId: any, treeNode: any, clickFlag: any) {
        let nodeId = treeNode.id || '';
        let spIdx = nodeId.indexOf('cat-');
        if (spIdx == 0) {
          selectedNode.nodeId = nodeId;
          currDepartment.id = parseInt(nodeId.substring(4));
          currDepartment.name = treeNode.name;
          emits('departmentClick', currDepartment);//触发事件
        }
      },
      beforeEditName(treeId: any, treeNode: any) {
        let nodeId = treeNode.id || '';
        if (nodeId.indexOf('cat-') == 0) {
          showEditDepartmentFormModal(nodeId.substring(4));
        } else if (nodeId.indexOf('leaf-') == 0) {

        }
        return false;
      },
      beforeRemove(treeId: any, treeNode: any) {
        let nodeId = treeNode.id || '';
        myutil.confirmForDelete(`确认要删除 ${treeNode.name} 吗？`).then(async()=>{
          if (nodeId.indexOf('cat-') == 0) {
              await departmentService.deleteDepartment(nodeId.substring(4));
              departmentZTree.removeNode(treeNode, false);
            } else if (nodeId.indexOf('leaf-') == 0) {
            }
        });
        return false;
      },
      onAsyncSuccess(event: any, treeId: any, treeNode: any, msg: any){

      }
    }
  };

  if(departmentZTree){
    departmentZTree.destroy();
    departmentZTree = null;
  }

  if(props.editable && props.dragable){
      ztreeSetting.edit.drag = {
        autoExpandTrigger:false,/**拖拽时父节点自动展开是否触发 onExpand 事件回调函数 */
        isCopy: false,
        isMove: true,
        prev: false,
			  next: false,
			  inner: true,
      };

      (ztreeSetting.callback as any).beforeDrag = function(treeId: any, treeNodes: any){
        if(treeNodes.length>1)return false;
        return true;
      };
      (ztreeSetting.callback as any).onDrag = function(event:any, treeId: any, treeNodes: any){
        return true;
      };
      (ztreeSetting.callback as any).beforeDrop = function(treeId: any, treeNodes: any, targetNode: any, moveType: any, isCopy: any){
        let pId = -1;
        if(targetNode == null){
          pId = -1;
        }else{
          let pnode = myutil.parseTreeNodeId(targetNode.id);
          pId = pnode.id;
        }
        let dragNode = treeNodes[0];
        let node = myutil.parseTreeNodeId(dragNode.id);
        let id = node.id;

        departmentService.changeParent(id, pId).catch((reason:any)=>{
          let msg = reason.errMsg || reason.errorMessage || JSON.stringify(reason);
          ElMessage.error(msg);
        }).finally(()=>{
          reAsyncChildNodes(targetNode);
        });
        return true;
      };
      (ztreeSetting.callback as any).onDrop = function(event: any, treeId: any, treeNodes: any, targetNode: any, moveType: any, isCopy: any){
        return true;
      };
  }
  departmentZTree = ($.fn as any).zTree.init($('#departmentTree'), ztreeSetting);
  parentTreeNode = undefined;
}

/** 弹出 部门 编辑表单 */
async function showEditDepartmentFormModal(id: number) {
  departmentFormModal.showModal(id);//显示表单对话框
}
/** 弹出 部门 添加表单 */
async function showAddDepartmentFormModal(parentId: number, parentName:string) {
  debugger;
  departmentFormModal.showModal(undefined, parentId, parentName);//显示表单对话框
}


/**部门表单【确定】按钮点击事件*/
async function departmentFormModalHandleOk() {
  let response = await departmentFormModal.submit(departmentForm.value as IForm);
  console.log("after ok button clicked:");
  console.log(response);

  reAsyncChildNodes(parentTreeNode)
}

/**重新加载子节点，如果parentTreeNode为空，则重新初始化树结构 */
function reAsyncChildNodes(parentTreeNode:any){
  if(parentTreeNode){
    departmentZTree.reAsyncChildNodes(parentTreeNode, "refresh");
  }else{
    emits('departmentClick', null);//触发事件
    initDepartmentTree(); //重新加载树结构
  }
}

/** 定义事件 */
const emits = defineEmits(['departmentClick'])

onMounted(() => {
  initDepartmentTree();
});
</script>